<template>
  <div id="orderPage">
    <HeadNav
      type="inquire"
      ref="head"
      :show="1"
      @publisherChange="publisherChange()"
    ></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="inquire" sort="order"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container" v-if="pagePower">
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  position: relative;
                  padding-bottom: 75px;
                "
              >
                <div class="section-title">订单查询</div>
                <div style="padding: 15px">
                  <div>
                    <a-range-picker
                      @change="onChange"
                      @calendarChange="handleCalendarChange"
                      @openChange="onOpenChange"
                      :disabledDate="disabledDate"
                      inputReadOnly
                      :value="[searchInfo.startDate, searchInfo.endDate]"
                    >
                      <a-icon slot="suffixIcon" type="calendar" />
                    </a-range-picker>
                  </div>
                  <div style="margin-top: 10px">
                    <a-cascader
                      :field-names="{
                        label: 'name',
                        value: 'code',
                        children: 'children',
                      }"
                      :options="regionList"
                      placeholder="所有地区"
                      change-on-select
                      :allowClear="false"
                      expand-trigger="hover"
                      style="width: 304px"
                      v-model="searchInfo.chooseRegion"
                    />
                    <a-select v-model="searchInfo.channel" style="width: 304px">
                      <a-select-option value="all">所有渠道</a-select-option>
                      <a-select-option value="2">天猫</a-select-option>
                      <a-select-option value="3">京东</a-select-option>
                      <a-select-option value="4">当当</a-select-option>
                      <a-select-option value="5">拼多多</a-select-option>
                      <a-select-option value="6">唯品会</a-select-option>
                      <a-select-option value="1">官网微店</a-select-option>
                      <a-select-option value="10">批发</a-select-option>
                      <!-- <a-select-option value="分销平台"
                        >分销平台</a-select-option
                      >
                      <a-select-option value="其他">其他</a-select-option> -->
                    </a-select>
                  </div>
                  <div style="margin-top: 10px">
                    <a-input-group compact>
                      <a-select v-model="searchInfo.goods" style="width: 100px">
                        <a-select-option value="spbs"
                          >按商品标识</a-select-option
                        >
                        <a-select-option value="spid">按商品ID</a-select-option>
                        <a-select-option value="isbn">按ISBN</a-select-option>
                      </a-select>
                      <a-input style="width: 30%" v-model="inputVal1" />
                    </a-input-group>
                  </div>
                  <div style="margin-top: 10px">
                    <a-input-group compact>
                      <a-select v-model="searchInfo.order" style="width: 100px">
                        <a-select-option value="1">按订单号</a-select-option>
                        <a-select-option value="2">按报订单号</a-select-option>
                      </a-select>
                      <a-input style="width: 30%" v-model="inputVal2" />
                    </a-input-group>
                  </div>
                  <div style="margin-top: 10px">
                    <a-input-group compact>
                      <a-select v-model="searchInfo.user" style="width: 100px">
                        <a-select-option value="1">按用户ID</a-select-option>
                        <a-select-option value="2">按用户名称</a-select-option>
                      </a-select>
                      <a-input style="width: 30%" v-model="inputVal3" />
                    </a-input-group>
                  </div>
                  <div style="text-align: center; margin-top: 10px">
                    <a-button
                      type="primary"
                      @click="onSearch"
                      style="width: 120px; margin-right: 10px"
                      >搜索</a-button
                    >
                    <a-button @click="reset">重置条件</a-button>
                  </div>
                </div>
                <!-- 列表 -->
                <div class="table">
                  <table style="table-layout: fixed">
                    <colgroup>
                      <col width="80" />
                      <col width="120" />
                      <col width="80" />
                      <col width="90" />
                      <col width="200" />
                      <col width="240" />
                      <col width="120" />
                      <col width="120" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>自增ID</td>
                        <td>订单号/报订单号</td>
                        <td>销售渠道</td>
                        <td>订单金额</td>
                        <td>订单品种</td>
                        <td>收货地区</td>
                        <td>用户信息</td>
                        <td style="text-align: right">销售时间</td>
                      </tr>
                    </thead>
                    <tbody v-if="orderList.length > 0">
                      <tr v-for="(item, index) in orderList" :key="index">
                        <template v-if="Object.keys(item).length > 0">
                          <td style="position: relative">
                            {{ item.order_id }}
                            <div class="goods-list" v-if="item.checked">
                              <div
                                class="goods-item"
                                v-for="(gitem, gindex) in item.details"
                                :key="gindex"
                              >
                                <a-row type="flex" align="middle">
                                  <a-col
                                    style="width: 80px; margin-right: 10px"
                                  >
                                    <div style="text-align: center">
                                      {{ gitem.goods_id }}
                                    </div>
                                    <div style="text-align: center">
                                      [{{ gitem.outer_id }}]
                                    </div>
                                  </a-col>
                                  <a-col
                                    style="width: 130px; margin-right: 10px"
                                  >
                                    <div
                                      class="goods-name click-font"
                                      :title="gitem.goods_name"
                                      @click.stop="$toDetail(gitem.goods_id)"
                                    >
                                      {{ gitem.goods_name }}
                                    </div>
                                    <div>{{ gitem.isbn }}</div>
                                  </a-col>
                                  <a-col
                                    style="width: 120px; margin-right: 10px"
                                  >
                                    <div
                                      class="goods-author"
                                      :title="gitem.author"
                                    >
                                      {{ gitem.author }}
                                    </div>
                                  </a-col>
                                  <a-col
                                    style="width: 120px; margin-right: 10px"
                                  >
                                    {{ gitem.cate_node_2 }}
                                    <span v-if="gitem.cate_node_3"
                                      >> {{ gitem.cate_node_3 }}</span
                                    >
                                    <span v-if="gitem.cate_node_4"
                                      >> {{ gitem.cate_node_4 }}</span
                                    >
                                  </a-col>
                                  <a-col
                                    style="width: 100px; margin-right: 10px"
                                    >2012-02-02</a-col
                                  >
                                  <a-col
                                    style="width: 100px; margin-right: 10px"
                                    >{{ gitem.publish_name }}</a-col
                                  >
                                  <a-col style="width: 80px; margin-right: 10px"
                                    >￥{{
                                      Number(gitem.fixed_price).toFixed(2)
                                    }}</a-col
                                  >
                                  <a-col
                                    style="width: 70px; margin-right: 10px"
                                  >
                                    <span class="green"
                                      >￥{{
                                        Number(gitem.sale_price).toFixed(2)
                                      }}</span
                                    >
                                  </a-col>
                                  <a-col
                                    style="width: 70px; margin-right: 10px"
                                  >
                                    <span class="main-font"
                                      >{{ gitem.buy_count }}册</span
                                    >
                                  </a-col>
                                  <a-col style="width: 80px">
                                    <span class="green"
                                      >￥{{
                                        Number(gitem.total_money).toFixed(2)
                                      }}</span
                                    >
                                  </a-col>
                                </a-row>
                              </div>
                            </div>
                          </td>
                          <td>
                            <div class="main-font">{{ item.bookuu_id }}</div>
                            <div>{{ item.order_outer_id }}</div>
                          </td>
                          <td>
                            <div>{{ item.platform }}</div>
                            <div>{{ item.bookuu_shop }}</div>
                          </td>
                          <td>
                            <span class="main-font"
                              >￥{{ item.sales_money.toFixed(2) }}</span
                            >
                          </td>
                          <td>
                            <span
                              class="click-font"
                              @click="openDetail(item, index)"
                              >共{{ item.items_count }}个品种，{{
                                item.sales_count
                              }}件商品</span
                            >
                          </td>
                          <td>
                            <span class="main-font">{{ item.address }}</span>
                          </td>
                          <td>
                            <div>{{ item.user_info.realname }}</div>
                            <div>{{ item.user_info.reader_id }}</div>
                          </td>
                          <td style="text-align: right">
                            {{ item.order_time }}
                          </td>
                        </template>
                        <template v-else>
                          <td colspan="8"><div style="height: 36px"></div></td>
                        </template>
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="8" style="text-align: center">
                          <div style="padding: 36px 0"><a-empty /></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!-- 分页 -->
                <div
                  class="page"
                  style="position: absolute; right: 15px; bottom: 15px"
                  v-if="orderList.length > 0"
                >
                  <a-pagination
                    :show-total="(total) => `共 ${trueTotal>2000?2000+'+':trueTotal} 条数据`"
                    :default-current="1"
                    :total="total"
                    :defaultPageSize="pageSize"
                    v-model="page"
                    @change="onShowSizeChange"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading ref="load" :show="1" :isLoading="isLoading"></Loading>
  </div>
</template>
<style lang="scss" scoped>
#orderPage {
  & .goods-list {
    position: absolute;
    width: 1050px;
    left: 0;
    top: 58px;
    background-color: $themeColor5;
    font-size: $fontSize - 2;
    z-index: 2;
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.15);
    & .goods-item {
      padding: 10px 5px;
      & .goods-name {
        width: 130px;
        @include textOverflow;
      }
      & .goods-author {
        @include twoColtextOverflow;
      }
    }
  }
}
</style>
<script>
import { COMMON_REGION } from "../../apis/common.js";
import { QUERY_ORDER_LISTS } from "../../apis/inquire.js";
export default {
  data() {
    return {
      pagePower: true,
      searchInfo: {
        startDate: null,
        endDate: null,
        channel: "all",
        goods: "spbs",
        order: "2",
        user: "1",
        chooseRegion: [0],
      },
      inputVal1: "",
      inputVal2: "",
      inputVal3: "",
      chooseDate: null,
      orderList: [],
      goodsList: [],
      page: 1,
      pageSize: 20,
      trueTotal: 0,
      total: 0,
      isLoading: true,
      regionList: [],
    };
  },
  mounted() {
    this.searchInfo.endDate = this.$moment().format("YYYY-MM-DD");
    this.searchInfo.startDate = this.$moment()
      .subtract("days", 7)
      .format("YYYY-MM-DD");
    this.getRegion();
    this.getOrder();
  },
  methods: {
    // 订单列表
    async getOrder() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        begin_time: this.searchInfo.startDate + ' 00:00:00',
        end_time: this.searchInfo.endDate + ' 23:59:59',
        page: this.page,
        page_size: this.pageSize,
        timestamp: tStamp,
      };
      // 省市区
      if (this.searchInfo.chooseRegion[0] !== 0) {
        if (this.searchInfo.chooseRegion.length > 0) {
          data.province_code = this.searchInfo.chooseRegion[0];
        }
        if (this.searchInfo.chooseRegion.length > 1) {
          data.city_code = this.searchInfo.chooseRegion[1];
        }
        if (this.searchInfo.chooseRegion.length > 2) {
          data.country_code = this.searchInfo.chooseRegion[2];
        }
      }
      //   渠道
      if (this.searchInfo.channel != "all") {
        data.platform = this.searchInfo.channel;
      }
      //   商品类型
      if (this.searchInfo.goods == "spbs") {
        data.spbs = this.inputVal1;
      } else if (this.searchInfo.goods == "spid") {
        data.goods_id = this.inputVal1;
      } else if (this.searchInfo.goods == "isbn") {
        data.isbn = this.inputVal1;
      }
      // 订单类型
      if (this.searchInfo.order == "1") {
        data.bookuu_id = this.inputVal2;
      } else if (this.searchInfo.order == "2") {
        data.order_outer_id = this.inputVal2;
      }
      //   用户类型
      if (this.searchInfo.user == "1") {
        data.reader_id = this.inputVal3;
      } else if (this.searchInfo.user == "2") {
        data.realname = this.inputVal3;
      }
      data.sign = this.$getSign(data);
      let res = await QUERY_ORDER_LISTS(data);
      if (res.code == 0) {
        this.orderList = [];
        this.orderList = res.data.list;
        this.trueTotal = res.data.total_count;
        this.total = res.data.total_count > 2000 ?2000:res.data.total_count;
        this.$nextTick(() => {
          this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取地区分类列表
    async getRegion() {
      var tStamp = this.$getTimeStamp();
      let data = {
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await COMMON_REGION(data);
      if (res.code == 0) {
        this.regionList = [];
        let _data = {
          code: 0,
          name: "所有地区",
          pid: 0,
        };
        this.regionList.push(_data);
        res.data.map((value, key) => {
          this.regionList.push(value);
        });
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 展开订单详情
    openDetail(item, index) {
      this.orderList = this.orderList.map((value, key) => {
        if (index == key) {
          value.checked = value.checked ? false : true;
        }
        return value;
      });
      let _arr = [];
      for (let i = 0; i < item.details.length; i++) {
        _arr.push({});
        if(item.checked){
          this.orderList.splice(index+1, 0, {});
        } 
      }
      if(item.checked){
        //   this.orderList.splice(index+1, 0, _arr);
      }else{
          this.orderList.splice(index+1, _arr.length);
      }
    },
    // 搜索
    onSearch() {
      if (!this.searchInfo.startDate || !this.searchInfo.endDate) {
        this.$refs.head.globalTip(1, "请选择时间范围！", 0);
        return;
      }
      this.isLoading = true;
      this.page = 1;
      this.getOrder();
    },
    // 重置条件
    reset() {
      this.searchInfo.endDate = this.$moment().format("YYYY-MM-DD");
      this.searchInfo.startDate = this.$moment()
        .subtract("days", 7)
        .format("YYYY-MM-DD");
      this.searchInfo.channel = "all";
      this.searchInfo.goods = "spbs";
      this.searchInfo.order = "2";
      this.searchInfo.user = "1";
      this.inputVal1 = "";
      this.inputVal2 = "";
      this.inputVal3 = "";
    },
    // 分页
    onShowSizeChange(page, pageSize) {
      this.isLoading = true;
      this.page = page;
      this.getOrder();
    },
    onOpenChange(status) {
      // 清空禁用时间段的设置
      this.chooseDate = null;
    },
    //日期范围发生变化的回调
    onChange(date, dateString) {
      this.searchInfo.startDate = dateString[0];
      this.searchInfo.endDate = dateString[1];
    },
    //待选日期发生变化的回调(根据选择的日期，来控制不可选，这里仅获取选择的日期)
    handleCalendarChange(value, mode) {
      //用moment进行格式转换
      this.chooseDate = this.$moment(value[0]._d).format("YYYY-MM-DD");
    },
    //禁止选择的日期（未来日期不可选，半年之前的不可选）
    disabledDate(current) {
      if (!this.chooseDate) {
        return false;
      }
      const chooseDate = this.chooseDate;
      return (
        (current &&
          current <
            this.$moment(this.chooseDate).subtract(1, "M").startOf("day")) ||
        current > this.$moment(this.chooseDate).add(1, "M").endOf("day")
      );
    },
    publisherChange() {
      this.isLoading = true;
      this.getOrder();
    },
  },
};
</script>